<template>
  <div class="check-Containeir">
    <el-form ref="form" :model="testBaseform" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="11">
          <!-- 学科 -->
          <el-form-item label="学科" prop="subject">
            <el-select class="textWeight" v-model="testBaseform.subject" placeholder="请选择学科">
              <el-option :key="index" :label="item.subjectName" :value="item.subjectName" v-for="(item, index) in subjectData"></el-option>
            </el-select>
          </el-form-item>

          <!-- 目录 -->
          <el-form-item label="目录" prop="catalogID">
            <el-select class="textWeight" v-model="testBaseform.catalogID" placeholder="请选择目录">
              <el-option :key="index" :label="item.catalog" :value="item.catalog" v-for="(item, index) in cataData"></el-option>
            </el-select>
          </el-form-item>

          <!-- 企业 -->
          <el-form-item label="企业" prop="shortName">
            <el-select class="textWeight" v-model="testBaseform.shortName" placeholder="请选择企业">
              <el-option :key="index" :label="item.enterprise" :value="item.enterprise" v-for="(item, index) in cataData"></el-option>
            </el-select>
          </el-form-item>

          <!-- 城市 -->
          <el-form-item label="城市" prop="province">
            <el-select class="cityWidth" v-model="testBaseform.province" placeholder="请选择城市" @change="getCitys">
              <el-option :key="index" :label="item" :value="item" v-for="(item, index) in provinceData"></el-option>
            </el-select>
            <el-select class="cityWidth" v-model="testBaseform.city" placeholder="请选择活动区域">
              <el-option :label="item" :value="item" :key="index" v-for="(item, index) in citysData"></el-option>
            </el-select>
          </el-form-item>

          <!-- 方向 -->
          <el-form-item label="方向" prop="direction">
            <el-select class="textWeight" v-model="testBaseform.direction" placeholder="请选择方向">
              <el-option :key="index" :label="item.direction" :value="item.direction" v-for="(item, index) in cataData"></el-option>
            </el-select>
          </el-form-item>

          <!-- 题型 -->
          <el-form-item label="题型" prop="questionType">
            <el-radio-group v-model="testBaseform.questionType">
              <el-radio label="0">单选</el-radio>
              <el-radio label="1" @change="turnoptions">多选</el-radio>
              <el-radio label="2" @change="turnOffoptions">简答</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 难度 -->
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="testBaseform.difficulty">
              <el-radio label="0">简单</el-radio>
              <el-radio label="1">一般</el-radio>
              <el-radio label="2">困难</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="题干" prop="questionContent">
        <quill-editor v-model="questionContentOne" ref="myQuillEditor" :options="editorOption" class="textHeight"> </quill-editor>
      </el-form-item>
      <el-row>
        <el-col :span="7">
          <el-form-item label="选项" v-if="optionsShow" prop="options">
            <el-radio-group v-model="testBaseform.options.isRight" @change="inputchange">
              <el-radio :label="item.isRight" :key="index" v-for="(item, index) in testBaseform.options"
                >{{ item.code }}
                <el-input class="inputWidth" v-model="testBaseform.input"> </el-input>
                <!-- 文件域 -->
                <el-button>点击上传</el-button>
                <el-input type="file" style="display:none"></el-input>
              </el-radio>
            </el-radio-group>
            <!-- 添加按钮 -->
            <el-button size="mini" type="danger" @click="addNewoptions">
              +添加选项与答案
            </el-button>
          </el-form-item>
          <el-form-item label="解析视频">
            <el-input v-model="testBaseform.desc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="答案解析">
        <quill-editor v-model="questionContentTwo" ref="myQuillEditor" :options="editorOption" class="textHeight"> </quill-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入获取学科接口
import { getSubject, TestbaseList } from '../../api/components/component'
// 引入城市数据
import { provinces, citys } from '../../../public/citys'
export default {
  data() {
    return {
      // 添加按钮的状态
      addBtn: false,
      // 表单的数据
      testBaseform: {
        // 学科
        subject: '',
        // 目录
        catalogID: '',
        // 企业
        shortName: '',
        // 省份
        province: '',
        // 地区
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: '0',
        // 难度
        difficulty: '',
        // 题干
        questionContent: '',
        // 选项
        options: [
          { code: 'A', title: '', img: '', isRight: '' },
          { code: 'B', title: '', img: '', isRight: '' },
          { code: 'C', title: '', img: '', isRight: '' },
          { code: 'D', title: '', img: '', isRight: '' }
        ],
        // 单选框内容
        input: ''
      },
      // 文本框一
      questionContentOne: '',
      // 文本框二
      questionContentTwo: '',
      // 富文本配置参数
      editorOption: {
        modules: {
          // 富文本配置选项
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block']
          ]
        }
      },
      rules: {
        subject: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
        shortName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        province: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        direction: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        questionType: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        questionContent: [{ required: true, message: '请输入企业名称', trigger: 'blur' }]
      },
      // 选项状态
      optionsShow: true,
      // 学科目录
      subjectData: [],
      // 目录数据
      cataData: [],
      // 市区数据
      provinceData: [],
      // 县城数据
      citysData: [],
      // 选项按钮
      optionsContainet: ['', '', '', ''],
      codeData: []
    }
  },
  methods: {
    inputchange(value) {
      console.log(value)
      console.log(this.testBaseform.input)
    },
    // 点击添加选项按钮
    addNewoptions() {
      this.testBaseform.options.push({
        code: '',
        title: '',
        img: '',
        isRight: ''
      })
    },
    // 点击多选按钮,展示选项
    turnoptions() {
      this.optionsShow = true
      this.addBtn = true
    },
    turnOffoptions() {
      this.optionsShow = false
    },
    // 监听城市选择框
    getCitys(province) {
      this.testBaseform.city = ''
      this.citysData = citys(province)
    },
    // 监听表单提交事件
    onSubmit() {
      console.log('表单提交事件')
    },
    // 获取学科列表
    async getSubjects() {
      const { data } = await getSubject()
      this.subjectData = data.items
    },
    // 获取企业简称
    async getShortName() {
      const { data } = await TestbaseList()
      this.cataData = data.items
      console.log(this.cataData)
    }
  },
  created() {
    this.getSubjects()
    this.getShortName()
    // 初始化后拿取城市数据
    this.provinceData = provinces()
    for (var i = 4; i < 26; i++) {
      this.codeData.push(String.fromCharCode(65 + i))
    }
    console.log(this.codeData)
  }
}
</script>

<style lang="less" scoped>
.check-Containeir {
  height: 1900px;
  .el-form {
    .el-form-item {
      .inputWidth {
        width: 470px;
      }
      .cityWidth {
        width: 233px;
        margin-right: 5px;
      }
      .textWeight {
        width: 470px;
        margin-right: 4px;
      }
      .textHeight {
        height: 200px;
        margin-bottom: 70px;
      }
      /deep/ .el-form-item__label {
        font-weight: 1000;
      }
    }
  }
}
</style>
